<template>
  <el-input v-if="type == 'search'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <el-date-picker v-else-if="type == 'date'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <el-input-number v-else-if="type == 'number'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <el-switch v-else-if="type == 'switch'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <el-select v-else-if="type === 'select'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal">
    <el-option v-for="(item, index) in itemList" :key="index" :label="item.text" :value="item.value" />
  </el-select>
  <dictItem v-else-if="type === 'dictItem'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <numRange v-else-if="type === 'numRange'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <treeDicItem v-else-if="type === 'dictTree'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <dept-select v-else-if="type === 'dept'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <empInput v-else-if="type === 'emp'" v-model="inputVal" :style="style" v-bind="controlSet" @change="refreshVal" />
  <el-date-picker
    v-else-if="type === 'year'"
    v-model="inputVal"
    type="year"
    :style="style"
    v-bind="controlSet"
    @change="refreshVal"
  />
</template>

<script>
import moment from 'moment'
import deptSelect from '@/components/unit/deptSelect.vue'
import numRange from '@/customForm/components/queryControl/numRange.vue'
import empInput from '@/components/emp/empInput.vue'
export default {
  components: {
    deptSelect,
    numRange,
    empInput
  },
  props: {
    id: {
      type: String,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    query: {
      type: Object,
      default: null
    },
    show: {
      type: String,
      default: null
    },
    code: {
      type: String,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      type: null,
      inputVal: null,
      controlSet: {},
      relation: null,
      style: {
        minWidth: null
      }
    }
  },
  computed: {
  },
  watch: {
    code: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    },
    item: {
      handler(val) {
        if (val && this.code) {
          this.reset()
        }
      },
      immediate: false
    }
  },
  mounted() {
  },
  methods: {
    refreshVal() {
      if (this.relation == null) {
        return
      }
      this.relation.forEach(c => {
        const t = this.query[c.LayoutId]
        let item = t.param.find(a => a.key === this.id)
        if (item == null) {
          item = {
            key: this.id,
            ColId: c.ColId,
            Mode: c.Mode
          }
          t.param.push(item)
        }
        const vals = this.formatVal(c.Mode)
        if (vals == null) {
          item.Vals = null
          item.Val = null
        } else if (Array.isArray(vals)) {
          item.Vals = vals
        } else {
          item.Val = vals
        }
        t.ver = t.ver + 1
      })
    },
    formatVal(mode) {
      if (this.inputVal == null || this.inputVal === '') {
        return null
      } else if (this.code === 'year') {
        if (mode === 5) {
          const begin = moment(this.inputVal).year() + '-1-1 0:0:0'
          return [begin, moment(begin).endOf('year').format('YYYY-MM-DD HH:mm:ss')]
        } else {
          return moment(this.inputVal).year()
        }
      } else if (this.code === 'date' && this.controlSet.type === 'daterange') {
        return [moment(this.inputVal[0]).format('YYYY-MM-DD 0:0:0'), moment(this.inputVal[1]).format('YYYY-MM-DD 0:0:0')]
      } else if (this.code === 'date' && this.controlSet.type !== 'daterange') {
        return moment(this.inputVal).format('YYYY-MM-DD 0:0:0')
      }
      return this.inputVal
    },
    reset() {
      if (this.item) {
        const set = this.item.ControlSet ?? {}
        this.relation = this.item.FormRelation
        set.placeholder = this.show
        this.style.minWidth = set.width ?? '150px'
        this.controlSet = set
        if (this.code === 'dateRange') {
          set.type = 'daterange'
          this.type = 'date'
        } else {
          this.type = this.code
        }
        this.$nextTick(this.initDefValue)
      } else {
        this.controlSet = {}
        this.style.minWidth = null
        this.type = this.code
      }
    },
    initDefValue() {
      const def = this.controlSet['def']
      if (def == null || def === '') {
        return
      } else if (((this.type === 'date' && this.controlSet.type !== 'daterange') || this.type === 'year') && def === 'curTime') {
        this.inputVal = new Date()
        this.refreshVal()
      }
    }
  }
}
</script>
<style scoped>

</style>
